<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <jsp:include page="../inc/js.jsp"/>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>接口验证设备管理</title>
    <jsp:include page="../inc/css.jsp"/>
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
    <jsp:include page="../inc/menu.jsp"/>

    <div class="content-wrapper">
        <section class="content">
            <div class="row">
                <div class="col-12">
                    <div class="card" style="margin-top: 10px">
                        <div class="card-header">
                            <h4>${verifyInfo.title}</h4>

                            <div class="form-inline">
                                <select id="searchCompanyList" class="form-control">
                                    <option value="">全部公司</option>
                                </select>

                                <div class="form-group tableTopBtn">
                                    <input id="searchKeyWord" placeholder="关键词查询" class="form-control"/>
                                </div>

                                <button type="button" title="查询" class="btn btn-info tableTopBtn" onclick="_verifyInfoChildList.fn.reloadData()"> 查询</button>
                                <button type="button" title="重置搜索条件并查询" class="btn btn-success tableTopBtn" onclick="_verifyInfoChildList.fn.resetAndReloadData()"> 重置</button>
                                <button type="button" title="返回公司列表" class="btn btn-warning tableTopBtn" onclick="_verifyInfoChildList.fn.goBack()">返回</button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered table-hover" id="dataTables" style="width: 99%">
                                    <colgroup>
                                        <col class="gradeA even"/>
                                        <col class="gradeA odd"/>
                                        <col class="gradeA even"/>
                                        <col class="gradeA odd"/>
                                        <col class="gradeA even"/>
                                        <col class="gradeA odd"/>
                                    </colgroup>
                                    <thead>
                                    <tr>
                                        <th>所属公司</th>
                                        <th>设备名称</th>
                                        <th>设备编号</th>
                                        <th style="max-width: 150px;">录入时间</th>
                                        <th style="max-width: 50px">状态</th>
                                        <th style="max-width: 150px">最近时间</th>
                                        <th style="min-width: 60px">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <!-- /.card -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </section>
        <!-- /.content -->
    </div>
</div>
<!-- ./wrapper -->

<input id="hiddenVerifyInfoId" type="hidden" value="${verifyInfo.id}"/>
<input id="hiddenVerifyInfoContent" type="hidden" value="${verifyInfo.content}"/>

<!-- page script -->
<script type="text/javascript">
    let _verifyInfoChildList = {
        v: {
            list: [],
            dTable: null
        },
        fn: {
            init: function () {
                _verifyInfoChildList.fn.getCompanyList();

                _verifyInfoChildList.fn.dataTableInit();
            },
            getCompanyList: function () {
                $.post('common/companyList', {
                    id: 1
                }, function (result) {
                    if (result.length > 0) {
                        let content = '';
                        $.each(result, function (i, item) {
                            content += '<option value="' + item.id + '">' + item.name + '</option>';
                        });

                        $('#searchCompanyList').append(content);
                    } else {
                        info("暂无公司数据", "error");
                    }
                });
            },
            goBack: function () {
                window.history.go(-1);
            },
            reloadData: function () {
                _verifyInfoChildList.v.list = [];
                _verifyInfoChildList.v.dTable.DataTable().ajax.reload(null, false);
            },
            resetAndReloadData: function () {
                $('#searchCompanyList').val('');
                $('#searchKeyWord').val('');

                _verifyInfoChildList.fn.reloadData();
            },
            dataTableInit: function () {
                _verifyInfoChildList.v.dTable = $tutu.dataTable($('#dataTables'), {
                    "processing": true,
                    "serverSide": true,
                    "autoWidth": true,//自动计算宽度
                    "lengthChange": false,//是否允许公司改变表格每页显示的记录数
                    "searching": false,
                    "ordering": false,
                    "ajax": {
                        "url": "backend/device/list",
                        "type": "POST"
                    },
                    "language": $tutu.v.dataTableL,
                    "columns": [
                        {
                            "data": "company",
                            render: function (data) {
                                if (null != data && data !== '') {
                                    return data.name;
                                } else {
                                    return "";
                                }
                            }
                        },
                        {"data": "name"},
                        {"data": "code"},
                        {
                            "data": "createTime",
                            render: function (data) {
                                return crtTimeFtt(data);
                            }
                        },
                        {
                            "data": "onlineStatus",
                            render: function (data) {
                                if (null === data || '' === data || typeof data === "undefined" || data === 0) {
                                    return '<span style="color: red;">离线</span>';
                                } else {
                                    return '<span style="color: green;">在线</span>';
                                }
                            }
                        },
                        {
                            "data": "lastOnlineTime",
                            render: function (data) {
                                return crtTimeFtt(data);
                            }
                        },
                        {"data": null}
                    ],
                    /*添加小插件*/
                    "columnDefs": [
                        {
                            "data": null,
                            "defaultContent": "<button style='display: none;' type='button' title='添加设备' class='btn btn-success btn-sm addInfo'>" +
                                "<i class='fa fa-check'></i>" +
                                "</button>" +
                                "<button type='button' style='display: none;' title='移除设备' class='btn btn-danger btn-sm removeInfo'>" +
                                "<i class='fa fa-remove'></i>" +
                                "</button>",
                            "targets": -1
                        }
                    ],
                    "createdRow": function (row, data, index) {
                        _verifyInfoChildList.v.list.push(data);
                    },
                    rowCallback: function (row, data) {
                        let allContent = $('#hiddenVerifyInfoContent').val();

                        if (allContent.indexOf(data.code) === -1) {
                            $('td', row).last().find(".addInfo").css('display', '');
                            $('td', row).last().find(".removeInfo").css('display', 'none');

                            $('td', row).last().find(".addInfo").click(function () {
                                _verifyInfoChildList.fn.changeRelation(data.code, 1);
                            });
                        } else {
                            $('td', row).last().find(".addInfo").css('display', 'none');
                            $('td', row).last().find(".removeInfo").css('display', '');

                            $('td', row).last().find(".removeInfo").click(function () {
                                _verifyInfoChildList.fn.changeRelation(data.code, 0);
                            });
                        }
                    },
                    "fnServerParams": function (aoData) {
                        _verifyInfoChildList.v.list = [];

                        aoData.searchCompanyId = $('#searchCompanyList').val();
                        aoData.keyWord = $('#searchKeyWord').val();
                    },
                    "fnDrawCallback": function (data) {
                        $tutu.uiForm(data);
                    }
                });
            },
            changeRelation: function (deviceCode, type) {
                let finallyContent = $('#hiddenVerifyInfoContent').val();

                if (!finallyContent.endsWith(',')) finallyContent += ',';
                if (finallyContent.startsWith(',')) finallyContent = finallyContent.substring(1);

                if (Number(type) === 1) {
                    if (finallyContent.indexOf(deviceCode + ',') === -1) finallyContent += deviceCode + ',';
                } else {
                    finallyContent = finallyContent.replace(new RegExp(deviceCode + ',', 'g'), '');
                }

                startLoading();

                $.post('backend/verifyInfo/updateDeviceInfo', {
                    id: $('#hiddenVerifyInfoId').val(),
                    content: finallyContent
                }, function (result) {
                    endLoading();

                    $('#hiddenVerifyInfoContent').val(finallyContent);

                    if (result.code === 0) {
                        info("操作成功", "success");

                        _verifyInfoChildList.fn.reloadData();
                    } else {
                        info(result.msg, "error");
                    }
                });
            }
        }
    };

    $(document).ready(function () {
        _verifyInfoChildList.fn.init();

        window.onload = function () {
            checkSelectMenu("verifyInfoLi");

            loadMenuColor('verifyInfoLi');
        }
    });
</script>
</body>
</html>